<!DOCTYPE html>
<html>
<head>
    <title>JSON to HTML Table</title>
</head>
<body>
    <table id="jsonTable"></table>

    <script>
        // 读取 JSON 文件
        fetch('index.json')
            .then(response => response.json())
            .then(data => {
                // 获取表格元素
                const table = document.getElementById('jsonTable');

                // 创建表头
                const thead = document.createElement('thead');
                const headerRow = document.createElement('tr');
                const keyHeader = document.createElement('th');
                keyHeader.textContent = 'Key';
                const valueHeader = document.createElement('th');
                valueHeader.textContent = 'Value';
                headerRow.appendChild(keyHeader);
                headerRow.appendChild(valueHeader);
                thead.appendChild(headerRow);
                table.appendChild(thead);

                // 创建表格内容
                const tbody = document.createElement('tbody');
                for (const item of data.libraries) {
                    const key = item.key;
                    const value = item.info[0].value;

                    const row = document.createElement('tr');
                    const keyCell = document.createElement('td');
                    keyCell.textContent = key;
                    const valueCell = document.createElement('td');
                    valueCell.textContent = value;
                    row.appendChild(keyCell);
                    row.appendChild(valueCell);
                    tbody.appendChild(row);
                }
                table.appendChild(tbody);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    </script>
</body>
</html>
